<template>
  <div>
    <div>
      <el-button type="primary" @click="dialog.visible = true" >生成二维码</el-button>
      <el-button type="primary" @click="downloadBatchFun" >打包下载</el-button>
    </div>
    <div>
      <div class="dw-dcs-main-title">
        <h4>答卷地址</h4>
        <div class="dw-dcs-main-p">通过手机扫一扫，或下载二维码，或复制地址在浏览器打开，即可进行问卷数据收集。</div>
      </div>
      <div class="dw-dcs-main-content">
        <el-row>
          <el-col v-for="survey in surveyList" :key="survey.id" :span="12">
            <el-row type="flex" justify="start" align="middle" style="margin-bottom: 20px;">
              <el-col :span="6">
                <el-image :src="survey.qrUrl" class="dw-dcs-main-img">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
                <div style="font-size: 14px; text-align: center;">
                  <span>参加人数：{{ survey.answerNum }}</span>
                </div>
              </el-col>
              <el-col :span="18">
                <el-row style="margin: 0 0 10px 10px">
                  <span>渠道名称：</span>
                  <el-input v-model="survey.channelName" style="width: 200px;" @change="changeChannelName(survey.id, $event)"></el-input>
                </el-row>
                <el-row>
                  <el-button size="small" style="margin: 0 0 10px 10px" type="primary" icon="el-icon-copy-document" @click="copyActiveCode($event,survey.answerUrl1 )" >复制地址</el-button>
                </el-row>
                <el-row>
                  <el-button size="small" type="primary" icon="el-icon-download" style="margin: 0 0 10px 10px" @click="downloadAnswerImg(`${survey.qrUrl}&down=1`)" >下载二维码</el-button>
                </el-row>
                <el-row>
                  <el-button size="small" type="danger" icon="el-icon-delete" style="margin: 0 0 10px 10px" @click="deleteQRFun(survey.id)" >删除</el-button>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>

    <el-dialog :visible.sync="dialog.visible" title="生成二维码" style="z-index: 2999;">
      <el-form ref="form" :model="form" :rules="{ num: [{ required: true, message: '生成数量不能为空' }] }" label-width="80px">
        <el-form-item label="生成数量" prop="num" required>
          <el-input-number v-model="form.num" :min="1" :max="100" placeholder="请输入生成数量" controls-position="right" style="width: 300px;"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="clickCreate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {dwSurveyListQR, dwCreateQR, deleteQR, changeChannel} from '@/api/dw-survey'

import Clipboard from 'clipboard'

export default {
  name: 'DwAnswerUrlMain',
  components: {
    Clipboard
  },
  props: {
    survey: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      surveyList: [],
      dialog: {
        visible: false
      },
      form: {
        num: null
      }
    }
  },
  watch: {
    survey () {
      const resultData = this.surveyList
      resultData.forEach((item) => { item.answerUrl1 = location.origin + '/static/diaowen/answer-p.html?sid=' + this.survey.sid + '&channelId=' + item.id })
      this.surveyList = resultData
    }
  },
  mounted () {
    this.getSurveyInfo()
  },
  methods: {
    clickCreate () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(valid)
          dwCreateQR(this.$route.params.id, this.form.num).then((response) => {
            this.getSurveyInfo()
            this.dialog.visible = false
            this.$message.success('已生成')
          })
        }
      })
    },
    changeChannelName (channelId, value) {
      changeChannel(channelId, value).then(() => {
        this.$message.success('修改成功')
        this.getSurveyInfo()
      })
    },
    downloadAnswerImg (imgSrc) {
      console.debug(imgSrc)
      window.location.href = imgSrc
    },
    downloadBatchFun () {
      window.location.href = location.origin+'/api/dwsurvey/app/channel/downLoadAllQr.do?surveyId=' + this.$route.params.id
    },
    deleteQRFun (channelId) {
      deleteQR(this.$route.params.id, channelId).then((res) => {
        this.getSurveyInfo()
        this.$message.success('刪除成功')
      })
    },
    copyActiveCode (e, text) {
      // console.debug(this.$children[0].survey)
      console.debug(this.survey)
      const clipboard = new Clipboard(e.target, {text: () => text})
      clipboard.on('success', e => {
        this.$message({type: 'success', message: '复制成功'})
        // 释放内存
        clipboard.off('error')
        clipboard.off('success')
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        this.$message({type: 'warning', message: '该浏览器不支持自动复制'})
        // 释放内存
        clipboard.off('error')
        clipboard.off('success')
        clipboard.destroy()
      })
      clipboard.onClick(e)
    },
    getSurveyInfo () {
      dwSurveyListQR(this.$route.params.id).then((response) => {
        const resultData = response.data.data
        this.surveyList = resultData
      })
    }
  }
}
</script>

<style scoped>
.dw-dcs-main-p{
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}
.dw-dcs-main-content{
  padding: 20px 0px;
}
.dw-dcs-main-img{
  border: 1px solid rgb(241, 242, 245);
}
.dw-dcs-main-title{
  padding-bottom: 10px;
}
</style>
<style>
.el-layout {
  z-index: auto !important;
}
</style>
